<!doctype html>
<html lang="en">
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>言成言成啊</title>
    <link rel="shortcut icon" href="/images/favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/meethigher/cdn@9.0/css/meethigher-font.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/meethigher/cdn@9.0/css/animate.css">
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
<header class="header">
    <div class="header-menu"><span class="fa fa-bars"></span></div>
    <div class="header-search"><span class="fa fa-search"></span></div>
    <div class="header-title"><a href="/">言成言成啊 | <span class="header-subtitle">Kit Chen&#39;s Blog</span></a></div>
    <ul class="header-navbar clearFix">
        
            <li><a href="/">主页</a></li>
        
            <li><a href="/tags">标签</a></li>
        
            <li><a href="/archives">归档</a></li>
        
            <li><a href="/search">导航</a></li>
        
    </ul>
</header>
<main class="main">
    <div class="main-content meethigher-scroll">
    <article class="post">
        <div class="post-title">
            <h2 class="title">js动态绑定动态元素</h2>
        </div>
        <div class="post-media2">
            <span class="post-time">2019-11-16</span>
            
                <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li></ul>
            
        </div>
        <div class="post-content blog-markdown">
            <h4 id="No-1-动态生成元素绑定事件"><a href="#No-1-动态生成元素绑定事件" class="headerlink" title="No.1 动态生成元素绑定事件"></a>No.1 动态生成元素绑定事件</h4><p>今天碰到一个问题，js无法对动态生成的元素进行绑定。</p>
<p>我一开始，知道没有获取到那个标签，所以通过<code>onload</code>方法来获取元素，企图通过初始页面加载完成之后，再获取标签，这样也行，但是，异步获取数据之后生成的标签就不行了，<code>onload</code>只能执行一次啊，因为异步请求没有刷新页面啊。</p>
<p>后来，搜了一下，发现了解决方案；</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"fu"</span>&gt;</span></span><br><span class="line">    //动态生成的li标签</span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//这个是我的写法</span></span><br><span class="line">$(<span class="string">"li"</span>).on(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">"haha"</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//这就出现问题了，这样绑定事件，一旦元素发生变化，就会失效</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//解决方案</span></span><br><span class="line">$(<span class="string">".fu"</span>).on(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">"haha"</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//通过上面的这个方法，就能动态地给动态元素添加事件了</span></span><br></pre></td></tr></table></figure>

<h4 id="No-2-点击非内容区域关闭弹窗"><a href="#No-2-点击非内容区域关闭弹窗" class="headerlink" title="No.2 点击非内容区域关闭弹窗"></a>No.2 点击非内容区域关闭弹窗</h4><p>今天晚上还有个值得一提的事情，就是标题这个事。</p>
<p>这个就涉及到冒泡的问题了。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).on(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">/*隐藏元素的逻辑*/</span></span><br><span class="line">&#125;);</span><br><span class="line">$(<span class="string">"div"</span>).on(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">/*显示元素的逻辑*/</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//上面的这种写法，会导致两个都会冒泡，也就是执行的意思。出现的效果就是元素刚显示就被隐藏了</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//解决方案</span></span><br><span class="line">$(<span class="string">"div"</span>).on(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span> (<span class="params">e</span>)</span>&#123;</span><br><span class="line">    e.stopPropagation();<span class="comment">//阻止click事件冒泡到父元素</span></span><br><span class="line">    <span class="comment">/*显示元素的逻辑*/</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>按上面的方法，就完美解决了。</p>
<p>总结一下，其实这都不难理解，但是总是会在一些小问题上浪费时间。</p>
<p>算了，仔细想想，这一切都是我成为大佬路上的垫脚石。</p>
        </div>
        
            <div class="busuanzi">
                <span id="busuanzi_container_page_pv">阅读量<span id="busuanzi_value_page_pv"></span>次</span>
                <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            </div>
        
    </article>
</div>
    <pointer href="javascript:void(0);" class="arrow fa fa-arrow-up"></pointer>
<pointer href="javascript:void(0);" class="arrow fa fa-arrow-down"></pointer>

</main>
<aside class="aside">
    <div class="aside-content">
        <div class="aside-avatar"><img src="/images/kitchen.jpg" alt="言成"></div>
        <div class="aside-author">言成</div>
        <div class="aside-description">爱学习，爱运动，爱看妹子</div>
        <ul class="aside-contact clearFix">
            <li><span class="fa fa-github"></span><a href="https://github.com/meethigher">Github</a></li>
            <li><span class="fa fa-envelope"></span><a href="javascript:void(0);">meethigher@qq.com</a></li>
            <li><span class="fa fa-weixin"></span><a href="javascript:void(0);"><img src="/images/weixin.png" alt="扫描微信二维码，加我哦！"></a></li>
        </ul>
    </div>
</aside>
<div class="toolbar"><span class="fa fa-th"></span></div>
<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/gh/meethigher/cdn@9.0/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/meethigher/cdn@9.0/js/particles.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/meethigher/cdn@9.0/js/app.js"></script>
<script src="/js/meethigher.js"></script>
<script src="/js/toolbar.js"></script>
</body>
</html>